/**
 * 文档管理API使用示例
 * 演示如何使用文档管理服务进行增删改查操作
 */

import React, { useEffect, useState } from 'react';
import { documentService, categoryService } from '../services/documentation-service';

/**
 * 示例1：文档列表组件
 * 展示如何获取和显示文档列表，支持分页、筛选和搜索
 */
export function DocumentListExample() {
    const [documents, setDocuments] = useState([]);
    const [loading, setLoading] = useState(true);
    const [currentPage, setCurrentPage] = useState(1);
    const [total, setTotal] = useState(0);

    useEffect(() => {
        loadDocuments();
    }, [currentPage]);

    /**
     * 加载文档列表
     */
    async function loadDocuments() {
        try {
            setLoading(true);

            // 调用文档服务获取列表
            // 根据配置自动使用Mock或真实API
            const result = await documentService.getList({
                page: currentPage,
                pageSize: 10,
                status: 'published',
                sortBy: 'viewCount',
                sortOrder: 'desc'
            });

            // 更新状态
            setDocuments(result.data.data);
            setTotal(result.data.total);

            console.log('文档列表加载成功:', result);
        } catch (error) {
            console.error('加载失败:', error);
        } finally {
            setLoading(false);
        }
    }

    if (loading) return <div>加载中...</div>;

    return (
        <div className="document-list">
            <h2>文档列表示例</h2>

            {/* 文档项 */}
            {documents.map(doc => (
                <div key={doc.id} className="document-item">
                    <h3>{doc.title}</h3>
                    <p>{doc.summary}</p>
                    <div className="meta">
                        <span>分类: {doc.categoryName}</span>
                        <span>浏览: {doc.viewCount}</span>
                        <span>作者: {doc.author}</span>
                    </div>
                    <div className="tags">
                        {doc.tags?.map(tag => (
                            <span key={tag} className="tag">{tag}</span>
                        ))}
                    </div>
                </div>
            ))}

            {/* 分页 */}
            <div className="pagination">
                <button
                    disabled={currentPage === 1}
                    onClick={() => setCurrentPage(p => p - 1)}
                >
                    上一页
                </button>
                <span>共 {total} 条记录</span>
                <button onClick={() => setCurrentPage(p => p + 1)}>
                    下一页
                </button>
            </div>
        </div>
    );
}

/**
 * 示例2：文档详情组件
 * 展示如何获取和显示单个文档的详细信息
 */
export function DocumentDetailExample({ slug }) {
    const [document, setDocument] = useState(null);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        if (slug) {
            loadDocument(slug);
        }
    }, [slug]);

    /**
     * 加载文档详情
     */
    async function loadDocument(docSlug) {
        try {
            setLoading(true);

            // 根据slug获取文档详情
            const result = await documentService.getBySlug(docSlug);
            setDocument(result.data);

            // 增加浏览量
            await documentService.incrementView(result.data.id);

            console.log('文档详情加载成功:', result);
        } catch (error) {
            console.error('加载失败:', error);
        } finally {
            setLoading(false);
        }
    }

    if (loading) return <div>加载中...</div>;
    if (!document) return <div>文档不存在</div>;

    return (
        <div className="document-detail">
            <h1>{document.title}</h1>

            <div className="meta-info">
                <span>作者: {document.author}</span>
                <span>分类: {document.categoryName}</span>
                <span>浏览: {document.viewCount}</span>
                <span>点赞: {document.likeCount}</span>
                <span>发布时间: {document.publishedAt}</span>
            </div>

            <div className="tags">
                {document.tags?.map(tag => (
                    <span key={tag} className="tag">{tag}</span>
                ))}
            </div>

            {/* 渲染HTML内容 */}
            <div
                className="content"
                dangerouslySetInnerHTML={{ __html: document.contentHtml }}
            />
        </div>
    );
}

/**
 * 示例3：文档创建表单
 * 展示如何创建新文档
 */
export function DocumentCreateExample() {
    const [formData, setFormData] = useState({
        title: '',
        slug: '',
        summary: '',
        content: '',
        contentType: 'direct',
        categoryId: null,
        tags: [],
        status: 'draft',
        isPublic: true,
        language: 'zh-CN'
    });
    const [categories, setCategories] = useState([]);
    const [submitting, setSubmitting] = useState(false);

    useEffect(() => {
        loadCategories();
    }, []);

    /**
     * 加载分类列表
     */
    async function loadCategories() {
        try {
            const result = await categoryService.getAll(true); // 平铺模式
            setCategories(result.data);
        } catch (error) {
            console.error('加载分类失败:', error);
        }
    }

    /**
     * 处理表单提交
     */
    async function handleSubmit(e) {
        e.preventDefault();

        try {
            setSubmitting(true);

            // 创建文档
            const result = await documentService.create(formData);

            console.log('文档创建成功:', result);
            alert('文档创建成功！');

            // 可以跳转到文档详情页
            // navigate(`/docs/${result.data.slug}`);
        } catch (error) {
            console.error('创建失败:', error);
            alert('创建失败: ' + error.message);
        } finally {
            setSubmitting(false);
        }
    }

    /**
     * 处理输入变化
     */
    function handleChange(field, value) {
        setFormData(prev => ({
            ...prev,
            [field]: value
        }));
    }

    return (
        <div className="document-create">
            <h2>创建文档示例</h2>

            <form onSubmit={handleSubmit}>
                {/* 标题 */}
                <div className="form-group">
                    <label>标题 *</label>
                    <input
                        type="text"
                        value={formData.title}
                        onChange={(e) => handleChange('title', e.target.value)}
                        placeholder="请输入文档标题"
                        required
                    />
                </div>

                {/* Slug */}
                <div className="form-group">
                    <label>Slug *</label>
                    <input
                        type="text"
                        value={formData.slug}
                        onChange={(e) => handleChange('slug', e.target.value)}
                        placeholder="文档唯一标识符（如：java-guide）"
                        pattern="^[a-z0-9-]+$"
                        required
                    />
                    <small>只能包含小写字母、数字和连字符</small>
                </div>

                {/* 摘要 */}
                <div className="form-group">
                    <label>摘要</label>
                    <textarea
                        value={formData.summary}
                        onChange={(e) => handleChange('summary', e.target.value)}
                        placeholder="简短描述文档内容"
                        maxLength={500}
                    />
                </div>

                {/* 内容 */}
                <div className="form-group">
                    <label>内容（Markdown格式）</label>
                    <textarea
                        value={formData.content}
                        onChange={(e) => handleChange('content', e.target.value)}
                        placeholder="# 标题\n\n内容..."
                        rows={10}
                    />
                </div>

                {/* 分类 */}
                <div className="form-group">
                    <label>分类</label>
                    <select
                        value={formData.categoryId || ''}
                        onChange={(e) => handleChange('categoryId', Number(e.target.value))}
                    >
                        <option value="">请选择分类</option>
                        {categories.map(cat => (
                            <option key={cat.id} value={cat.id}>
                                {cat.name}
                            </option>
                        ))}
                    </select>
                </div>

                {/* 标签 */}
                <div className="form-group">
                    <label>标签（逗号分隔）</label>
                    <input
                        type="text"
                        placeholder="java, 教程, 入门"
                        onChange={(e) => {
                            const tags = e.target.value.split(',').map(t => t.trim()).filter(Boolean);
                            handleChange('tags', tags);
                        }}
                    />
                </div>

                {/* 状态 */}
                <div className="form-group">
                    <label>状态</label>
                    <select
                        value={formData.status}
                        onChange={(e) => handleChange('status', e.target.value)}
                    >
                        <option value="draft">草稿</option>
                        <option value="published">已发布</option>
                        <option value="archived">已归档</option>
                    </select>
                </div>

                {/* 是否公开 */}
                <div className="form-group">
                    <label>
                        <input
                            type="checkbox"
                            checked={formData.isPublic}
                            onChange={(e) => handleChange('isPublic', e.target.checked)}
                        />
                        公开文档
                    </label>
                </div>

                {/* 提交按钮 */}
                <button type="submit" disabled={submitting}>
                    {submitting ? '创建中...' : '创建文档'}
                </button>
            </form>
        </div>
    );
}

/**
 * 示例4：分类选择器组件
 * 展示如何获取和显示分类树
 */
export function CategorySelectorExample() {
    const [categories, setCategories] = useState([]);
    const [selectedCategory, setSelectedCategory] = useState(null);

    useEffect(() => {
        loadCategories();
    }, []);

    /**
     * 加载分类列表（树形结构）
     */
    async function loadCategories() {
        try {
            const result = await categoryService.getAll(false); // 树形结构
            setCategories(result.data);
            console.log('分类加载成功:', result);
        } catch (error) {
            console.error('加载分类失败:', error);
        }
    }

    /**
     * 递归渲染分类树
     */
    function renderCategoryTree(cats, level = 0) {
        return cats.map(cat => (
            <React.Fragment key={cat.id}>
                <option
                    value={cat.id}
                    style={{ paddingLeft: `${level * 20}px` }}
                >
                    {'—'.repeat(level)} {cat.name} ({cat.docCount})
                </option>
                {cat.children && cat.children.length > 0 &&
                    renderCategoryTree(cat.children, level + 1)
                }
            </React.Fragment>
        ));
    }

    return (
        <div className="category-selector">
            <h2>分类选择器示例</h2>

            <select
                value={selectedCategory || ''}
                onChange={(e) => setSelectedCategory(Number(e.target.value))}
            >
                <option value="">请选择分类</option>
                {renderCategoryTree(categories)}
            </select>

            {selectedCategory && (
                <p>已选择分类ID: {selectedCategory}</p>
            )}
        </div>
    );
}

/**
 * 示例5：带搜索和筛选的文档列表
 * 展示完整的文档管理功能
 */
export function AdvancedDocumentListExample() {
    const [documents, setDocuments] = useState([]);
    const [categories, setCategories] = useState([]);
    const [loading, setLoading] = useState(false);

    // 查询参数
    const [filters, setFilters] = useState({
        page: 1,
        pageSize: 10,
        categoryId: null,
        status: '',
        keyword: '',
        sortBy: 'createdAt',
        sortOrder: 'desc'
    });

    // 分页信息
    const [pagination, setPagination] = useState({
        page: 1,
        pageSize: 10,
        total: 0,
        totalPages: 0
    });

    useEffect(() => {
        loadCategories();
    }, []);

    useEffect(() => {
        loadDocuments();
    }, [filters]);

    /**
     * 加载分类（用于筛选）
     */
    async function loadCategories() {
        try {
            const result = await categoryService.getAll(true); // 平铺模式
            setCategories(result.data);
        } catch (error) {
            console.error('加载分类失败:', error);
        }
    }

    /**
     * 加载文档列表
     */
    async function loadDocuments() {
        try {
            setLoading(true);

            // 构建查询参数（过滤掉空值）
            const params = {};
            Object.keys(filters).forEach(key => {
                if (filters[key] !== null && filters[key] !== '' && filters[key] !== undefined) {
                    params[key] = filters[key];
                }
            });

            // 获取文档列表
            const result = await documentService.getList(params);

            setDocuments(result.data.data);
            setPagination({
                page: result.data.page,
                pageSize: result.data.pageSize,
                total: result.data.total,
                totalPages: result.data.totalPages
            });
        } catch (error) {
            console.error('加载文档失败:', error);
        } finally {
            setLoading(false);
        }
    }

    /**
     * 更新筛选条件
     */
    function updateFilter(field, value) {
        setFilters(prev => ({
            ...prev,
            [field]: value,
            page: 1 // 重置到第一页
        }));
    }

    /**
     * 处理搜索
     */
    function handleSearch(e) {
        e.preventDefault();
        const keyword = e.target.keyword.value;
        updateFilter('keyword', keyword);
    }

    /**
     * 处理删除文档
     */
    async function handleDelete(id) {
        if (!confirm('确定要删除这个文档吗？')) return;

        try {
            await documentService.delete(id);
            alert('删除成功！');
            // 重新加载列表
            loadDocuments();
        } catch (error) {
            console.error('删除失败:', error);
            alert('删除失败: ' + error.message);
        }
    }

    return (
        <div className="advanced-document-list">
            <h2>高级文档列表示例</h2>

            {/* 搜索和筛选区域 */}
            <div className="filters-panel">
                {/* 搜索框 */}
                <form onSubmit={handleSearch}>
                    <input
                        type="text"
                        name="keyword"
                        placeholder="搜索文档..."
                        defaultValue={filters.keyword}
                    />
                    <button type="submit">搜索</button>
                </form>

                {/* 分类筛选 */}
                <select
                    value={filters.categoryId || ''}
                    onChange={(e) => updateFilter('categoryId', e.target.value ? Number(e.target.value) : null)}
                >
                    <option value="">全部分类</option>
                    {categories.map(cat => (
                        <option key={cat.id} value={cat.id}>
                            {cat.name}
                        </option>
                    ))}
                </select>

                {/* 状态筛选 */}
                <select
                    value={filters.status}
                    onChange={(e) => updateFilter('status', e.target.value)}
                >
                    <option value="">全部状态</option>
                    <option value="draft">草稿</option>
                    <option value="published">已发布</option>
                    <option value="archived">已归档</option>
                </select>

                {/* 排序 */}
                <select
                    value={filters.sortBy}
                    onChange={(e) => updateFilter('sortBy', e.target.value)}
                >
                    <option value="createdAt">创建时间</option>
                    <option value="updatedAt">更新时间</option>
                    <option value="viewCount">浏览量</option>
                    <option value="likeCount">点赞数</option>
                </select>

                <select
                    value={filters.sortOrder}
                    onChange={(e) => updateFilter('sortOrder', e.target.value)}
                >
                    <option value="desc">降序</option>
                    <option value="asc">升序</option>
                </select>
            </div>

            {/* 文档列表 */}
            {loading ? (
                <div>加载中...</div>
            ) : (
                <div className="document-list">
                    {documents.length === 0 ? (
                        <div>暂无文档</div>
                    ) : (
                        documents.map(doc => (
                            <div key={doc.id} className="document-card">
                                <h3>{doc.title}</h3>
                                <p>{doc.summary}</p>

                                <div className="meta">
                                    <span className="category">{doc.categoryName}</span>
                                    <span className="status">{doc.status}</span>
                                    <span>👁 {doc.viewCount}</span>
                                    <span>👍 {doc.likeCount}</span>
                                </div>

                                <div className="tags">
                                    {doc.tags?.map(tag => (
                                        <span key={tag} className="tag">{tag}</span>
                                    ))}
                                </div>

                                <div className="actions">
                                    <button onClick={() => {/* 查看详情 */ }}>查看</button>
                                    <button onClick={() => {/* 编辑 */ }}>编辑</button>
                                    <button onClick={() => handleDelete(doc.id)}>删除</button>
                                </div>
                            </div>
                        ))
                    )}
                </div>
            )}

            {/* 分页控制 */}
            <div className="pagination">
                <button
                    disabled={pagination.page === 1}
                    onClick={() => updateFilter('page', filters.page - 1)}
                >
                    上一页
                </button>

                <span>
                    第 {pagination.page} / {pagination.totalPages} 页
                    （共 {pagination.total} 条）
                </span>

                <button
                    disabled={pagination.page === pagination.totalPages}
                    onClick={() => updateFilter('page', filters.page + 1)}
                >
                    下一页
                </button>

                {/* 每页数量选择 */}
                <select
                    value={filters.pageSize}
                    onChange={(e) => updateFilter('pageSize', Number(e.target.value))}
                >
                    <option value="10">10条/页</option>
                    <option value="20">20条/页</option>
                    <option value="50">50条/页</option>
                </select>
            </div>
        </div>
    );
}

/**
 * 示例6：配置状态显示组件
 * 显示当前使用的数据源配置
 */
export function ApiConfigStatusExample() {
    const [config, setConfig] = useState(null);

    useEffect(() => {
        // 动态导入配置（避免打包时的问题）
        import('../config.js').then(module => {
            setConfig(module.API_CONFIG);
        });
    }, []);

    if (!config) return <div>加载配置中...</div>;

    return (
        <div className="api-config-status">
            <h2>当前API配置</h2>

            <table>
                <tbody>
                    <tr>
                        <td>全局Mock模式</td>
                        <td>
                            <strong>{config.USE_MOCK_DATA ? '✅ 开启' : '❌ 关闭'}</strong>
                        </td>
                    </tr>
                    <tr>
                        <td>文档模块Mock模式</td>
                        <td>
                            <strong>{config.DOCUMENTATION?.USE_MOCK_DATA ? '✅ 开启' : '❌ 关闭'}</strong>
                        </td>
                    </tr>
                    <tr>
                        <td>文档模块API地址</td>
                        <td>{config.DOCUMENTATION?.BASE_URL}</td>
                    </tr>
                    <tr>
                        <td>Mock延迟</td>
                        <td>{config.DOCUMENTATION?.MOCK_DELAY}ms</td>
                    </tr>
                </tbody>
            </table>

            <div className="tips">
                <h3>💡 提示</h3>
                <ul>
                    <li>开发阶段可以使用Mock数据加快开发速度</li>
                    <li>联调阶段切换到真实API进行集成测试</li>
                    <li>生产环境必须关闭Mock模式</li>
                </ul>
            </div>
        </div>
    );
}

// 导出所有示例组件
export default {
    DocumentListExample,
    DocumentDetailExample,
    DocumentCreateExample,
    CategorySelectorExample,
    AdvancedDocumentListExample,
    ApiConfigStatusExample
};

